<template>
<div class="dahezi">
  <el-carousel
    :interval="4000"
    type="card"
    height="280px"
    class="img"
    style="width:100%"
  >
    <el-carousel-item v-for="image in state.images" :key="image">
      <img class="img-a" :src="image.imageUrl" />
    </el-carousel-item>
  </el-carousel>
  <div class="gedan">
   <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1" class="yemen">热门推荐</el-menu-item>
    <a href="https://music.163.com/#/discover/playlist/?cat=%E5%8D%8E%E8%AF%AD">
    <el-menu-item index="2" class="wenzi">| 华语 |</el-menu-item>
    </a>
    <a href="https://music.163.com/#/discover/playlist/?cat=%E6%91%87%E6%BB%9A">
    <el-menu-item index="3" class="wenzi">| 摇滚 |</el-menu-item>
    </a>
    <a href="https://music.163.com/#/discover/playlist/?cat=%E6%B0%91%E8%B0%A3">
    <el-menu-item index="4" class="wenzi">| 民谣 |</el-menu-item>
    </a>
    <a href="https://music.163.com/#/discover/playlist/?cat=%E7%94%B5%E5%AD%90">
    <el-menu-item index="5" class="wenzi">| 电子 |</el-menu-item>
    </a>
    <div class="flex-grow" />
    <el-menu-item index="6"  class="gengduo"><a href="https://music.163.com/#/discover/playlist/">更多</a></el-menu-item>

  </el-menu>
  <div class="tu1" >
    <div>
    <a href="https://music.163.com/#/playlist?id=5456835430">
    <img src="../image/ge1.jpg" class="IMG1" />

    <li class="text">干嘛听苦情歌 以为多浪漫</li>
    </a>
    </div>
    <div>
    <a href="https://music.163.com/#/playlist?id=7639577324">
    <img src="../image/ge2.jpg" class="IMG1"/>
      <li class="text">清晨听歌指南</li>
    </a>
    </div>
    <div>
    <a href="https://music.163.com/#/playlist?id=7651196084">
    <img src="../image/ge3.jpg" class="IMG1"/>
     <li class="text">说唱派对|伤感旋律中文说唱</li>
    </a>
    </div>
    <div>
     <a href="https://music.163.com/#/playlist?id=7616058640">
    <img src="../image/ge4.jpg" class="IMG1"/>
     <li class="text">轻音乐/失眠系列/安静</li>
    </a>
    </div>
   <div>
     <a href="https://music.163.com/#/playlist?id=7699408632">
    <img src="../image/ge6.jpg" class="IMG1"/>
     <li class="text">Justin Bieber</li>
    </a>
    </div>
    <div>
     <a href="https://music.163.com/#/playlist?id=7635456107">
    <img src="../image/ge7.jpg" class="IMG1"/>
     <li class="text">中嘻合璧：华语潜力说唱</li>
    </a>
    </div>
    <div>
     <a href="https://music.163.com/#/playlist?id=7228606210">
    <img src="../image/ge8.jpg" class="IMG1"/>
     <li class="text">【超好听的小众英文歌】</li>
    </a>
    </div>
     <div>
     <a href="https://music.163.com/#/playlist?id=7638239221">
    <img src="../image/ge9.jpg" class="IMG1"/>
     <li class="text">悠游清凉心动萃梦</li>
    </a>
    </div>

  </div>


  
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="yemen">榜单</el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="6"  class="gengduo1"><a href="https://music.163.com/#/discover/toplist"><text decod:>更多</text></a></el-menu-item>

    </el-menu>
  



  
</div>



  
<div class="footer">
    <div class="footer1">
      <div class="footer01">
        <div class="logo4">
          <text><h3>下载绘梦客户端</h3></text>
        </div>

        <div class="tubiao">
          <div class="icon0">
            <div class="icon">
              <img src="../image/w2.png" />
              <img src="../image/w1.png" />
            </div>
            <div class="icontext">
              <text>PC版</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/pingguo2.png" />
              <img src="../image/pingguo1.png" />
            </div>
            <div class="icontext">
              <text>Mac版</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/anzhuo2.png" />
              <img src="../image/anzhuo1.png" />
            </div>
            <div class="icontext">
              <text>Android版</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/ios2.png" />
              <img src="../image/ios1.png" />
            </div>
            <div class="icontext">
              <text>iPhone版</text>
            </div>
          </div>
        </div>
      </div>

      <div class="footer01">
        <div class="logo4">
          <text><h3>友情合作</h3></text>
        </div>

        <div class="tubiao">
          <div class="icon0">
            <div class="icon">
              <img src="../image/yinyue2.png" />
              <img src="../image/yinyue1.png" />
            </div>
            <div class="icontext">
              <text>酷狗音乐</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/qqyinyue2.png" />
              <img src="../image/qqyinyue1.png" />
            </div>
            <div class="icontext">
              <text>qq音乐</text>
            </div>
          </div>
          <div class="icon0">
            <div class="icon">
              <img src="../image/wx2.png" />
              <img src="../image/wx1.png" />
            </div>
            <div class="icontext">
              <text>微信</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/qq2.png" />
              <img src="../image/qq1.png" />
            </div>
            <div class="icontext">
              <text>QQ</text>
            </div>
          </div>

          <div class="icon0">
            <div class="icon">
              <img src="../image/wb2.png" />
              <img src="../image/wb1.png" />
            </div>
            <div class="icontext">
              <text>微博</text>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer2">
      <div class="footer001">
        <ul class="cmfoot_ul2">
          <li class="cmfoot_li2">
            <p>|&emsp;关于绘梦&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>商务合作&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>广告服务&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>投诉指引&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>隐私政策&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>儿童隐私政策&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>用户服务协议&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>招聘信息&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>客服中心&emsp;|&emsp;</p>
          </li>
          <li class="cmfoot_li2">
            <p>举报中心&emsp;|&emsp;</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer3"> -->
      <text>互联网不良信息举报中心</text>
       <text>不良信息举报邮箱:3270823502@qq.com</text>
      <text>客服电话:17777879457</text>
    </div>
  </div>


 </div> 
</template>
<script>
import { getBanner } from "../api/home/api";
import { reactive, onMounted } from "vue";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      images: [
        // "https://img.yzcdn.cn/vant/apple-1.jpg",
        // "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
    });

    onMounted(async () => {
      let res = await getBanner();
      state.images = res.data.banners;
      console.log(res);
    });
    return { state };
  },
};
import { ref } from "vue";
const activeIndex = ref("1");
</script>
<style scoped>
.dahezi {
  background-image: url(../image/beijing1.jpg);
}
.img{
  background-color:rgba(255, 244, 244, 0.2);
}
.img-a {
  height: 271px;
  /* width: 750px; */
  width: 100%;
}
.gedan {
  border-top: none;
  border: 2px solid #74787a;
  margin-left: auto;
  margin-right: auto;
  height:100%;
  width: 65%;
  /* background-color: aquamarine; */
}
.yemen {
  color: rgb(202, 30, 7);
  font-size: 30px;
}
.gengduo {
  margin-left: 35%;
  color: rgb(214, 28, 11);
}
.tu1 {
  list-style: none;
  margin-top: 10px;
  margin-left: 9px;
  margin-right: 9px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.text {
  text-align: center;
}
.wenzi {
  font-size: 120%;
  color: rgba(6, 6, 6, 0.985);
}
.gengduo1 {
  margin-left: 60%;
  color: rgb(214, 28, 11);
}
.el-menu-demo {
  background-color:rgba(255, 244, 244, 0.2);
  border-bottom: red 2px solid;
}
.IMG1{
  width: 100%;
}
.flex-grow{
   flex-grow: 1;
}
/* 底部导航栏 */
.footer {
  list-style-type: none;
  height: 100%;
  background-color:rgba(55, 59, 61, 0.7);
  display: flex;
   flex-direction: column;
}
.footer1 {
  list-style: none;
  display: flex;
  height: 80%;
  justify-content: space-around;
}
.footer2 {
  list-style: none;
  display: flex;
  height: 100%;
  justify-content: space-around;
}
.footer3 {
  list-style: none;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.footer01 {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-left: 3%;
}
.tubiao {
  display: flex;
  justify-content: space-between;
}
.logo4 text {
  text-align: center;
}
.icon img {
  width: 60%;
  height: 60%;
}

.icontext{
  text-align: center;
}
.icon0 {
  display: flex;
}
.icon img:last-child {
  display: none;
}
.icon:hover img:first-child {
  display: none;
}
.icon:hover img:last-child {
  display: block;
}
.cmfoot_ul2 li {
  list-style: none;
  float: left;
}
.footer3 text {
  list-style: none;
  line-height: 100%;
  text-align: center;
}
</style>
